<!DOCTYPE html >

<html >

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Free Online Math Editor</title>
    <link rel="icon" href="img/sum.ico" >
     <meta name="description" content="Online Math editor help you creates Latex code and testing equations . Produces code for directly embedding equations into HTML websites, forums or blogs,also embed code into other application like Word,Open source,Web application support Latex,MathML.">
    <meta name="keywords" content="WYSIWYG,Tex, LaTeX,math editor , write equations, design equations, make equations, equation editor, equations, HTML5,HTML, online, open source, mimetex, mathjax, instantly rendered, customisable, instant preview">
    <link href="assets/css/MathEditor.css" rel="stylesheet" />
    <link href="assets/css/codemirror.css" rel="stylesheet" />
    <link href="assets/js/jquery-easyui/themes/gray/easyui.css" rel="stylesheet" />
    <link href="assets/js/jquery-easyui/themes/icon.css" rel="stylesheet" />
    <link href="assets/js/mathquill/css/mathquill.css" rel="stylesheet" />
     <script src="assets/js/jquery/jquery-1.10.2.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">
    <script type="text/javascript">
    function toMathML(jax,callback) {
          var mml;
          try {
            mml = jax.root.toMathML("");
            
          } catch(err) {
            if (!err.restart) {throw err} // an actual error
            return MathJax.Callback.After([toMathML,jax,callback],err.restart);
          }
          MathJax.Callback(callback)(mml);
        }
    </script>
    <script src="assets/js/jquery/optimize.js"></script>
	<script src="assets/js/mathquill/mathquill.js"  >
        
	</script>
    
    <script type="text/x-mathjax-config">
        MathJax.Hub.Config({ tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]} });



    </script>
    <script type="text/x-mathjax-config">
                    MathJax.Hub.Config({ "HTML-CSS": { scale: 100} });
    </script>
   <script type="text/javascript"
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
</head>

<body>
    <div class="container">
        <div id="aaFormulas" class="row">
            <nav class="navbar navbar-default navbar-fixed-top ">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
                      <span class="sr-only">Toggle navigation</span>
                      <span class="glyphicon glyphicon-arrow-down"></span>
                      MENU
                    </button>
                </div>
                <div class="collapse navbar-collapse" id="collapse">
                    <ul class="nav navbar-nav">  
                        <li class="dropdown"><a href="#" data-toggle="dropdown">Sub|Sup <span class="caret"></span></a>
                            <div id="" class="dropdown-menu">
                                <table cellspacing="0" style="border-spacing: 0px; border-collapse: collapse;">
                                    <tr>
                                        <td>
                                             <a href="#" class="s" title="\left|□\right|"  onclick="javascript:matheditor.tag('\\left|','\\right|')">$\left|□\right|$</a>
                                        </td>
                                        <td>
                                            <a href="#" class="s" title="\left\{□\right\}"  onclick="javascript:matheditor.tag('\\left\\{','\\right\\}')">$\left\{□\right\}$</a>
                                        </td>
                                        <td>
                                            <a href="#" class="s" title="\left[□\right]"  onclick="javascript:matheditor.tag('\\left[','\\right]')">$\left[□\right]$</a>
                                        </td>
                                        <td>
                                            <a href="#" class="s" title="\left(□\right)'"  onclick="javascript:matheditor.tag('\\left(','\\right)')">$\left(□\right)$</a> 
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <a href="#" class="s" title="sqrt"  onclick="javascript:matheditor.insert('\\sqrt{ } ')">$\sqrt{□}$</a>
                                        </td>
                                        <td>
                                            <a href="#" class="s" title="Nth Root"  onclick="javascript:matheditor.insert('\\sqrt[ ]{ } ')">$\sqrt[□]{□}$</a>
                                        </td>
                                        <td>
                                            <a href="#" class="s" title="Fraction"  onclick="javascript:matheditor.insert('\\frac{ }{ } ')">$\frac{□}{□}$</a>
                                        </td>
                                        <td>
                                            <a href="#" class="s" title="xrightarrow"  onclick="javascript:matheditor.insert('\\xrightarrow{ }{ } ')">$\xrightarrow[□]{□}$</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <a href="#" class="s " title="Vector"  onclick="javascript:matheditor.insert('\\vec{} ')">$\vec{□}$</a>
                                        </td>
                                        <td>
                                            <a href="#" class="s " title="Bar"  onclick="javascript:matheditor.insert('\\bar{} ')">$\bar{□}$</a>
                                        </td>
                                        <td>
                                            <a href="#" class="s " title="widetilde"  onclick="javascript:matheditor.insert('\\widetilde{} ')">$\widetilde{□}$</a>
                                        </td>
                                        <td>
                                            <a href="#" class="s " title="widehat"  onclick="javascript:matheditor.insert('\\widehat{} ')">$\widehat{□}$</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <a href="#" class="s" title="sup"  onclick="javascript:matheditor.insert('\\^{ } ')">$□^{□}$</a>
                                        </td>
                                        <td>
                                            <a href="#" class="s" title="sub"  onclick="javascript:matheditor.insert('_{ } ')">$□_{□}$</a>
                                        </td>
                                        <td>
                                            <a href="#" class="s" title="sub-sup'"  onclick="javascript:matheditor.insert('^{ }_{ } ')">$□^{□}_{□}$</a>
                                        </td>
                                        <td>
                                            
                                        </td>
                                    </tr>
                                </table>
                            </div>                    
                        </li>                    
                        <li class="dropdown"><a href="#" data-toggle="dropdown">Basic Math <span class="caret"></span></a>
                            <div id="basicmath" class="dropdown-menu">

                            </div>                    
                        </li>
                        <li class="dropdown"><a href="#" data-toggle="dropdown">Arrows <span class="caret"></span></a>
                            <div id="arrow" class="dropdown-menu">

                            </div>                    
                        </li>                                                
                         <li class="dropdown"><a href="#" data-toggle="dropdown">Matrixes <span class="caret"></span></a>
                            <div id="matrix" class="dropdown-menu">

                            </div>                    
                        </li>
                        <li class="dropdown"><a href="#" data-toggle="dropdown">Cases <span class="caret"></span></a>
                            <div id="cases" class="dropdown-menu">

                            </div>                    
                        </li>
                        <li class="dropdown"><a href="#" data-toggle="dropdown">Natural Logarithms <span class="caret"></span></a>
                            <div id="logarit" class="dropdown-menu">

                            </div>                    
                        </li>
                        <li class="dropdown"><a href="#" data-toggle="dropdown">Integral <span class="caret"></span></a>
                            <div id="integral" class="dropdown-menu">

                            </div>                    
                        </li>
                        <li class="dropdown"><a href="#" data-toggle="dropdown">Symbols 1 <span class="caret"></span></a>
                            <div id="more" class="dropdown-menu">

                            </div>                    
                        </li>
                        <li class="dropdown"><a href="#" data-toggle="dropdown">Symbols 2 <span class="caret"></span></a>
                            <div id="symbols" class="dropdown-menu">

                            </div>                    
                        </li>
                        
                        <li style="margin:0px 0px 0px 10px">
                            
                           
                        </li>
                        <li>
                            
                        </li>
                    </ul> 
                </div>
            </nav> 
        </div>
       
        <div class="row">
             <div class="col-lg-6 col-md-6 col-sm-6" >
                <p style="text-align:center;font-size:25px;">WYSIWYG Math</p>
                <p style="text-align:center;font-size:20px;"><span class="glyphicon glyphicon-arrow-down"></span></p>
                <div id="math-parent" style="padding:0" >
                    <div id="editable-math" class="col-lg-6 col-md-6 col-sm-6 mathquill-editable" title="Editor">
                    </div>  
                </div>
                <button class="btn btn-primary btn-sm " onclick="passValue()">Test MathJax Libary</button>
                <button class="btn btn-success btn-sm " onclick="getLatex(1)">Get Latex code</button>
                <button class="btn btn-success btn-sm " onclick="getImage(1)">Download Image </button>
                <button class="btn btn-danger btn-sm " onclick="clearValue()">Clear Data</button>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6">
                <p style="text-align:center;font-size:25px;">Test Latex Math </p>
                <p style="text-align:center;font-size:20px;"><span class="glyphicon glyphicon-arrow-down"></span></p>
                <div style="padding:0">
                    <div id="display" contenteditable>
                    </div>
                </div>
                    <button id="render" class="btn btn-primary btn-sm " onclick="saveMath()" >Render to Math</button>
                    <button style="display:none" id="rerender" class="btn btn-primary btn-sm " onclick="editMath()" >Render to Latex </button>
                    <button class="btn btn-success btn-sm " onclick="getLatex(2)" >Get Latex code</button>
                    <button class="btn btn-success btn-sm " onclick="getImage(2)">Download Image </button>
                    <button class="btn btn-success btn-sm " onclick="getMathML()">Get MathML</button>
                    <button class="btn btn-danger btn-sm " onclick="clearInsert()" >Clear Data</button>
                    
              
            </div>

            <div style="display:none" id="latex-title" title="LaTex">
                <textarea style="display:" id="latex-source"></textarea>
            </div> 
        </div>
        <div class="row introduction">
            <p ><bold>Online Math Editor help you create Latex code quickly by use WYSIWYG. We're using MathJax to test and display for mathematics</bold></p>
        </div>
        <div class="row footer" >
            <p>If you need help. Contact: onlinematheditor@gmail.com</p>  
            <p>If you like what I'm doing,just thank me by give me a cup of coffee to keep working:)
                <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
                                <input type="hidden" name="cmd" value="_s-xclick">
                                <input type="hidden" name="hosted_button_id" value="3S8KMLFRNLY2G">
                                <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
                                <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
                </form>
            </p>
                   
        </div>
        <script src="assets/js/controlMath.js"></script>
		<script src="assets/js/jquery-easyui/jquery.easyui.min.js"></script>
        <script src="assets/js/MathEditor.js">
		</script>
		<script src="js/bootstrap.min.js"></script>
        <script src="js/custombootstrap.js"></script>
         <script>
         $(document).ready(function() {
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
          (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
          })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

          ga('create', 'UA-53406558-1', 'auto');
          ga('send', 'pageview');
        });
          

        </script>
        <!--        <script src="http://codemirror.net/lib/codemirror.js"></script>   
        <script type="text/javascript">
            //var editor = CodeMirror.fromTextArea(document.getElementById("latex-source"), {
            //    lineNumbers: true,
            //    matchBrackets: true
            //});
        </script>   -->
    </div>
   
</body>

</html>
